import React from "react";
import { Carousel } from "antd-mobile";
import axios from "../../../api/instance";

export default class App extends React.Component {
  state = {
    data: [],
    imgHeight: 176,
  };
  componentDidMount() {
    // fetch("http://s.linweiqin.com/api/s/loginCheck")
    // simulate img loading
    axios.get("https://api-haoke-web.itheima.net/home/swiper").then((res) => {
      this.setState({
        data: res.body,
      });
    });
  }
  render() {
    return (
      <Carousel
        autoplay={false}
        infinite
      >
        {this.state.data.map((val) => (
          <img
            key={val.id}
            src={process.env.REACT_APP_BASEURL + val.imgSrc.replace("/","")}
            alt={val.alt}
            style={{ width: "100%", verticalAlign: "top" }}
            onLoad={() => {
              // fire window resize event to change height
              window.dispatchEvent(new Event("resize"));
              this.setState({ imgHeight: "auto" });
            }}
          />
        ))}
      </Carousel>
    );
  }
}
